import classnames from 'classnames'
import { useHistory } from 'react-router'
import { Dialog, NavBar, SearchBar } from 'antd-mobile'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useState } from 'react'
import { useDebounceFn } from 'ahooks'
import { useDispatch, useSelector } from 'react-redux'
import {
  clearSearchHistory,
  getSuggestion,
  handleSearchHistory,
} from '@/store/actions/search'
import { RootState } from '@/types/store'

const SearchPage = () => {
  const history = useHistory()

  const dispatch = useDispatch()

  // 创建一个搜索关键字的状态
  const [keyword, setKeyword] = useState('')

  const { suggestion, history: historyList } = useSelector(
    (state: RootState) => state.search
  )

  // const timeRef = useRef(-1)

  // useEffect(() => {
  //   return () => {
  //     clearTimeout(timeRef.current)
  //   }
  // }, [])

  const search = (val: string) => {
    if (!val.trim()) return
    // dispatch()
    // 你传入了什么字符串， 我就帮你存入仓库 本地
    // console.log('这个字符串我需要存起来', val)

    // 封装了一个action 处理数据 同步数据
    dispatch(handleSearchHistory(val))

    // 跳转到结果页
    history.push('/search/result?keyword=' + val)
  }

  // run就是帮你处理好的防抖函数
  const { run } = useDebounceFn(
    (val: string) => {
      // 就是要防抖的逻辑 （不需要频繁触发的代码放在这里）
      // console.log('我要发请求了。。。', val)
      dispatch(getSuggestion(val))
    },
    { wait: 500 }
  )

  return (
    <div className={styles.root}>
      {/* 搜索区域 */}
      <NavBar
        className="navbar"
        onBack={() => history.go(-1)}
        right={
          <span className="search-text" onClick={() => search(keyword)}>
            搜索
          </span>
        }
      >
        <SearchBar
          value={keyword}
          onChange={(val) => {
            // console.log(val)
            setKeyword(val)

            run(val)

            // clearTimeout(timeRef.current)

            // timeRef.current = window.setTimeout(() => {
            //   // 带着关键字 请求接口 获取搜索建议
            //   // 优化： 防抖
            //   // 防抖的关键：就是将你要做的事放入延时器中，以后先清延时器，然后再开延时器。。。
            //   console.log('我要发请求了。。。', val)
            // }, 500)
          }}
          placeholder="请输入关键字搜索"
        />
      </NavBar>

      {/* 搜索历史 搜索建议 看有么有keyword */}

      {/* 搜索历史 */}
      <div
        className="history"
        style={{
          display: keyword ? 'none' : 'block',
        }}
      >
        <div className="history-header">
          <span>搜索历史</span>
          <span
            onClick={() => {
              // dispatch()
              // 确认的对话框
              Dialog.confirm({
                title: '温馨提示',
                content: '是否清除全部历史？',
                onConfirm: () => {
                  // console.log('111')
                  dispatch(clearSearchHistory())
                },
              })
            }}
          >
            <Icon name="iconbtn_del" />
            清除全部
          </span>
        </div>

        <div className="history-list">
          {historyList.map((item, index) => {
            return (
              <span
                className="history-item"
                key={index}
                onClick={() => search(item)}
              >
                <span className="text-overflow">{item}</span>
                <Icon name="iconbtn_essay_close" />
              </span>
            )
          })}
        </div>
      </div>

      {/* 搜索建议 */}
      <div className={classnames('search-result', keyword ? 'show' : '')}>
        {suggestion.map((item, index) => {
          return (
            item && (
              <div
                className="result-item"
                key={index}
                onClick={() => search(item)}
              >
                <Icon className="icon-search" name="iconbtn_search" />
                <div
                  className="result-value text-overflow"
                  dangerouslySetInnerHTML={{
                    __html: item.replace(
                      new RegExp(keyword, 'ig'),
                      (x) => `<span>${x}</span>`
                    ),
                  }}
                >
                  {/* 如果你希望标签能被是识别，react中需要给父元素添加一个属性dangerouslySetInnerHTML */}
                  {/* 需求： 将每一个搜索建议字符串中与用户输入顺字符串重合的部分 用<span>？？</span>包裹 */}
                  {/* <span>黑马</span>
                程序员 */}
                  {/* {item + '<span>html</span>'} */}
                </div>
              </div>
            )
          )
        })}
      </div>
    </div>
  )
}

export default SearchPage
